<template>
  <view class="page-body" v-if="pageData">
    <div class="page-item">
      <div class="u-font-30 font-w-600">
        当前订单状态：{{ statusText(pageData.status_ext, pageData.ignore) }}
      </div>
    </div>

    <div class="page-item">
      <div class="u-font-30 font-w-600">服务信息</div>
      <!-- <div class="flex u-m-t-24">
        <div class="u-m-r-60">卖家备注</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">无</div>
        </div>
      </div> -->
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">地址信息</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">
            {{ pageData.address }}
          </div>
        </div>
      </div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">地址距离</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">{{ pageData.dis }}</div>
        </div>
      </div>
    </div>

    <div class="page-item">
      <div class="u-font-30 font-w-600">买家信息</div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">买家昵称</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">{{ pageData.name }}</div>
        </div>
      </div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">联系手机</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">{{ pageData.mobile }}</div>
        </div>
      </div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">买家备注</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">{{ pageData.words }}</div>
        </div>
      </div>
    </div>

    <div class="page-item">
      <div class="u-font-30 font-w-600">商品信息</div>
      <div
        v-for="goods in pageData.goods_list"
        :key="goods.goods_id"
        class="goods flex"
      >
        <image :src="goods.pic" class="goods-img" mode="aspectFill"></image>
        <div class="flex-w-1">
          <div class="font-w-600 flex-y-center u-m-b-14">
            <div class="goods-name flex-w-1 u-line-1 u-m-r-20">
              {{ goods.goods_name }}
            </div>
            <div class="goods-price">
              <text class="u-font-22">¥</text>
              <text>{{ goods.total_price }}</text>
            </div>
          </div>

          <div class="flex-y-center">
            <div class="flex-w-1">
              <div class="desc">{{ goods.worker_goods_ext_desc }}</div>
            </div>
            <div class="goods-num font-w-600">x{{ goods.num }}</div>
          </div>
        </div>
      </div>

      <div class="flex-x-end u-m-t-10">
        <div>出行 {{ pageData.express_price }}</div>
      </div>
      <!-- <div class="flex-x-end u-m-t-10">
        <div>尾款 20.00</div>
      </div> -->
      <div class="flex u-m-t-10">
        <div class="flex-w-1 price-color">
          <template v-if="pageData.order_type_ext == '601'"> 定金 </template>
          <template v-else-if="pageData.order_type_ext == '602'">尾款</template>
          <template v-else-if="pageData.order_type_ext == '603'">加钟</template>
          <template v-else>全款</template>
        </div>

        <div class="flex-x-end">
          <div class="color-999">共{{ pageData.num }}件，</div>
          <div class="font-w-600">
            实收:
            <text class="u-font-24">¥</text>
            {{ $utils.priceFilter(pageData.pay_price)[0] }}
            <text class="u-font-24">{{
              $utils.priceFilter(pageData.pay_price)[1]
            }}</text>
          </div>
        </div>
      </div>
    </div>

    <div class="page-item">
      <div class="u-font-30 font-w-600">订单信息</div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">订单编号</div>
        <div class="flex-w-1 flex-x-end">
          <div @click="copyText(pageData.order_no)" class="color-999 u-font-26">
            <text>{{ pageData.order_no }}</text>
            <text class="iconfont icon-copy"></text>
          </div>
        </div>
      </div>
      <div class="flex u-m-t-24">
        <div class="u-m-r-60">创建时间</div>
        <div class="flex-w-1 flex-x-end">
          <div class="color-999 u-font-26">
            {{ $utils.turnDate(pageData.created_at * 1000) }}
          </div>
        </div>
      </div>
    </div>

    <div class="page-bottom" v-if="pageData.ignore == 0 && pageData.status_ext != 5">
      <div class="fixed">
          <!-- 订单按钮 -->
        <StatusButton
          :order="pageData"
          @onQiangdan="onQiangdan"
          @onStatus="onStatus"
        ></StatusButton>
        
      </div>
    </div>
  </view>
</template>
<script>
import {
  orderList,
  orderBind,
  orderStatus as orderStatusApi,
} from "@/api/service-home";
import orderStatus from "@/service-home/static/json/order-status";
import StatusButton from '@/service-home/components/status-button'
export default {
  components:{
    StatusButton
  },
  data() {
    return {
      pageData: "",
      order_id: "",
    };
  },
  onLoad(params) {
    this.order_id = params.order_id;
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData() {
      const res = await orderList({ order_id: this.order_id });
      this.pageData = res.data.list[0];
    },
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: (result) => {
          this.$utils.toast("复制成功");
        },
        fail: () => {},
        complete: () => {},
      });
    },
    async onQiangdan(order, type) {
      await orderBind({ order_id: order.id, type }, true);
      this.loadData();
    },
    onPhone(order) {
      this.$utils.makePhoneCall(order.mobile);
    },
    onDaohang(order) {
      let address_data = JSON.parse(order.address_data);
      uni.openLocation({
        latitude: address_data.latitude - 0,
        longitude: address_data.longitude - 0,
        address: address_data.detail,
        success: (result) => {},
        fail: () => {
          this.$utils.toast("获取定位失败。");
        },
        complete: () => {},
      });
    },
    async onStatus(order, type) {
      await orderStatusApi({ type, order_id: order.id });
      this.loadData();
    },
  },
  computed: {
    statusText() {
      return function (type, ignore) {
        if (ignore) return "已忽略";
        return orderStatus[type];
      };
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.price-color {
  color: #f0250e;
}
.page-body {
  min-height: 100vh;
  padding: 24rpx;
  background: #f2f2f2;

  .page-item {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    padding: 24rpx;

    .goods {
      margin-top: 24rpx;
      .goods-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        background: #f2f2f2;
        margin-right: 20rpx;
      }

      .desc {
        font-size: 24rpx;
        display: inline-block;
        // background: #f2f2f2;
        // padding: 4rpx 12rpx;
        // border-radius: 6rpx;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .page-bottom {
    box-sizing: content-box;
    height: 100rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .fixed {
      box-shadow: 0 -1px 6px 1px #f2f2f2;
      box-sizing: content-box;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100rpx;
      padding: 0 24rpx env(safe-area-inset-bottom);
      background: #fff;

      display: flex;
      align-items: center;
      justify-content: flex-end;

      /deep/.bt {
        margin-top: 0;
      }
     
    }
  }
}
</style>
